---
title: Next.js
sidebar_label: Next.js
---

<table>
    <tr>
        <td width="100px">
            <img width="100px" src="/docs/img/tech/nextjs.svg" alt="next js logo" className="hideonlight"/>
            <img width="100px" src="/docs/img/tech/nextjslight.svg" alt="next js logo" className="hideondark"/>
        </td>
        <td>
            <a href="https://nextjs.org/" target="_blank">Next.js</a> is a React-based framework that provides a powerful and flexible set of tools for building high-performance, SEO-friendly web applications.
            Get started integrating authentication to your Next.js Application by checking out our <a href="https://github.com/zitadel/zitadel-nextjs" target="_blank">zitadel-nextjs</a> Example.
        </td>
    </tr>
</table>


### Resources
- [Example App Repository](https://github.com/zitadel/zitadel-nextjs)
- [Step-By-Step Guide](/docs/examples/login/nextjs)
- [B2B customer portal](https://github.com/zitadel/zitadel-nextjs-b2b): Showcase the use of personal access tokens in a B2B environment built with Next.js

### SDK

ZITADEL does not provide a Next.js specific SDK.
However, for integrating authentication into your Next.js Application you can use [NextAuth ZITADEL Provider](https://next-auth.js.org/providers/zitadel)

Check out our [Example Application](/docs/sdk-examples/nextjs#example-application)


### Example Application

The [zitadel-nextjs](https://github.com/zitadel/zitadel-nextjs) repository includes an Example Application ready to start and show how a Next.js application looks like with integrated ZITADEL Login.

What does the Example include:
TODO: ?? Update with correct infos
- Home Page with Login Button
- Authenticating user with OIDC PKCE Flow
- Private Page: Shows user information of authenticated user, only accessible after login
- Logout

### Step-By-Step Guide

The [Step-By-Step Guide](/docs/examples/login/nextjs) leads you through the whole process from configuring the right application in ZITADEL to a ready application with integrated Login.

After completing the Step-By-Step Guide you will have:
TODO: ?? Updated with correct infos
1. Example Web Application with integrated ZITADEL Login
2. Example page accessible by authenticated user showing retrieved user information
3. Logout
4. Correct setup for your application in ZITADEL

